<template>
  <div class="schedule-container">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ data }">
        <div
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calItem(data.day)"
        >
          <p>
            <!--这里原本有动态绑定的class，去掉-->
            {{
              data.day
                .split("-")
                .slice(1)
                .join("-")
            }}
            <br />
            <span
              :class="
                dealMyDate(data.day).grade == '紧急日程'
                  ? 'is-success'
                  : dealMyDate(data.day).grade == '一般日程'
                  ? 'is-common'
                  : 'is-danger'
              "
            >
              {{ dealMyDate(data.day).content }}
            </span>
          </p>
        </div>
      </template>
    </el-calendar>
    <el-dialog
      :title="editForm.day"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form @submit.native.prevent :ref="editForm" :model="editForm">
        <el-form-item label="日程" prop="content">
          <el-input v-model="editForm.content"></el-input>
        </el-form-item>
        <el-form-item label="性质" prop="grade">
          <el-radio-group v-model="editForm.grade">
            <el-radio label="一般日程"></el-radio>
            <el-radio label="紧急日程"></el-radio>
            <el-radio label="重要日程"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="callOf('editForm')">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="
            dialogVisible = false;
            add();
          "
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      resDate: [
        { date: "2021-03-20", content: "放假", grade: "一般日程" },
        { date: "2021-03-22", content: "去交电费", grade: "紧急日程" },
        { date: "2021-03-26", content: "去学习vue", grade: "重要日程" }
      ],
      dialogVisible: false,
      rcdata: [],
      editForm: {
        content: "",
        day: "",
        grade: "一般日程"
      }
    };
  },
  methods: {
    calItem(d) {
      //console.log("点击的日期是：", d);
      this.editForm.day = d;
      this.rcdata = this.dealMyDate(d);
      this.editForm.content = this.rcdata.content;
      this.editForm.grade = this.rcdata.grade;
      this.dialogVisible = true;
      //console.log("sadsadasdasd是：", this.editForm, this.rcdata.index);
    },
    dealMyDate(v) {
      // //console.log(v)
      let len = this.resDate.length;
      let res = [];
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res.content = this.resDate[i].content;
          res.grade = this.resDate[i].grade;
          res.index = i;
          break;
        }
      }
      return res;
    },
    //    calClick(item){
    //         //console.log(item)
    //         this.editForm.day = item.day
    //     },
    handleClose(done) {
      done();
    },
    add() {
      var a = {
        date: this.editForm.day,
        content: this.editForm.content,
        grade: this.editForm.grade
      };

      if (this.rcdata.grade) {
        //console.log("填入的日程", this.resDate, this.rcdata.grade, a);
        this.$set(this.resDate, this.rcdata.index, a);
        //console.log("修改后的：", this.resDate);
      } else {
        this.resDate.push(a);
      }
    },
    callOf(formName) {
      //console.log("sadad", formName);
      // this.$refs.formName.resetFields();
      // this.$refs['formName'].clearValidate()
      this.dialogVisible = false;
    }
  }
};
</script>
<style>
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
  font-size: 10px;
  margin-top: 5px;
}
.is-success {
  color: #d1e3fa;
}
.is-danger {
  color: #f56c6c;
}
.is-common {
  color: #909399;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "当月";
}
</style>
